<template>
  <div class="content">
    <div class="container">
      <div class="box-list" v-for="box in rightContent" :key="box.id">
        <div class="title">
          <span>/</span>
            {{box.cat_name}}
          <span>/</span>
        </div>
        <div class="goods-box">
          <div class="goods-list" v-for="goods in box.children" :key="goods.id">
            <router-link :to="{path:'/shop/shoplist/'+ goods.cat_id}">
              <div class="icon">
                <img :src="goods.cat_icon" alt="" @load="imageLoad">
              </div>
              <div class="text">
                {{goods.cat_name}}
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'CateContent',
  props:{
    rightContent:{
      type:Array,
      default(){
        return []
      }
    }
  },
  methods:{
    imageLoad(){
      this.$bus.$emit('pageImageLoad')
    }
  }
}
</script>

<style scoped>
.container .box-list .title{
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.container .box-list .goods-box{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.container .box-list .goods-box .goods-list{
  width: 33.33%;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 14px;
  margin-bottom: 5px;
}
.container .box-list .goods-box .goods-list .icon img{
  width: 50%;
}
</style>